<template>
  <div id="app" class="app">
    <img class="bg-img" :src=bgUrl>
    <img class="login-right-img" src="@media/login/login-right-img@2x.png" v-if="isLoginPage">
    <div class="app-wrapper" :style="{transform: `scale(${scaleValue}) translateX(${xOffset})`}">
      <Toolbar></Toolbar>
      <router-view />
    </div>
    <MediaDialog :scale="scaleValue"></MediaDialog>
    <!-- <div v-if="open" class="img-loading"> -->
      <!-- {{open}} -->
      <!-- <img src="@/assets/loading/loading.gif"> -->
    <!-- </div> -->
  </div>
</template>

<script>
import Toolbar from "@/component/Toolbar";
import MediaDialog from "@/component/dialog/MediaDialog";

export default {
  name: 'App',
  components: {
    Toolbar,
    MediaDialog
  },
  data() {
    return {
      screenWidth: 1920,
      screenHeight: 1080,
    }
  },
  created(){
    console.log(this.open)
    // this.$store.commit('dialog/IMG_LOADING', true)
    console.log(this.open)
  },
  mounted() {
    this.updateScreenSize();
    // TODO: 窗口size改变实时刷新frame
    const that = this;
    window.onresize = ()=>{
      that.updateScreenSize();
    }
  },
  methods: {
    updateScreenSize() {
      let height = document.documentElement.clientHeight || document.body.clientHeight
      let width = document.documentElement.clientWidth || document.body.clientWidth
      
      this.screenHeight = height;
      this.screenWidth = width;
    },
  },
  computed: {
    scaleValue() {
      let heightScale = this.screenHeight / 1080
      let widthScale = this.screenWidth / 1920
      let scale = Math.min(heightScale, widthScale)
      return scale
    },
    xOffset() {
      let width = this.screenWidth
      let offset = (width - 1920 * this.scaleValue) * 0.5 / width
      offset = (offset * 100).toFixed(2)
      return offset + '%'
    },
    bgUrl() {
      if (this.isLoginPage) {
        return require("@media/common/background@2x.png")
      }
      return require("@media/common/background@2x.png")
    },
    isLoginPage() {
      return this.$route.name == 'login'
    },
    open() {
      return this.$store.state.dialog.isOpenImgLoading
    }
  }
}
</script>
<style>
html,
body {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
}
.bg-img {
  background: no-repeat;
  position: absolute;
  height: 100%;
  width: 100%;
}
.login-right-img {
  position: absolute;
  margin: auto 0px auto auto;
  width: auto;
  height: 78.5%;
  top: 0;
  bottom: 0;
  right: 0;
  object-fit: contain;
}
.app-wrapper {
  width: 1920px;
  height: 1080px;
  background: no-repeat;
  background-size: cover;
  overflow: hidden;
  transform-origin: 0 0;
}
</style>
<style lang="scss" scoped>
.app {
  .img-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.5);
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      overflow: auto;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
